<template>
    <view class="page">
        <!-- 自定义navbar -->
        <view class="nav-bar">
            <backNav title="VIP充值" bgColor="#FFF3e0"></backNav>
        </view>
        <!-- 等级选择区 -->
        <view class="tabCon">
            <u-tabs bgColor="#fff5e3" inactive-color="#788395" active-color="#ffd2a4" class="tab" :list="tabList"
                :is-scroll="false" :current="current" @change="tabChange"></u-tabs>
        </view>
        <!-- 顶部标题区 -->
        <view class="header">
            <text class="title">等级</text>
            <u-icon class="questionIcon" color="#5e3420" name="question-circle" size="25"></u-icon>
            <text class="link">查看明细</text>
        </view>

        <view class="card" v-for="(item, index) in cardList" :key="index" :class="{ active: index === curIndex }"
            @click="curIndex = index">
            <!-- 左侧图标（占位） -->
            <image class="icon" src="/static/images/vip/vipLogo.png" mode="aspectFit" />
            <!-- 中间文字 -->
            <text class="name">{{ item.name }}</text>
            <!-- 中间文字 -->
            <text class="price">¥{{ item.price }}</text>
            <!-- 右侧箭头 -->
            <u-icon name="arrow-right" size="30"></u-icon>
        </view>
        <!-- 权益 -->
        <p class="beneTitle">权益</p>
        <view class="benefit">
            <view class="benefitItem">
                <u-image width="100%" height="150" src="/static/images/vip/benefit1.png" />
                <text class="desc">优质课程</text>
            </view>
            <view class="benefitItem">
                <u-image width="100%" height="150" src="/static/images/vip/benefit2.png" />
                <text class="desc">精品课程</text>
            </view>
        </view>

        <!-- 支付按钮 -->
        <button class="pay-btn" @click="handlePay">确认协议并支付<b style="font-size: 32rpx;margin-left: 20rpx;">¥{{ cardList[curIndex].price }}</b></button>
        <!-- 协议 -->
        <view class="protocol">
            <text>
                我已阅读并同意<a href="https://www.baidu.com" target="_blank" style="color: #5e3420;">《用户服务协议》</a>
                <!-- 和<a href="https://www.baidu.com" target="_blank" style="color: #5e3420;">《隐私政策》</a> -->
            </text>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 定义VIP卡项的类型
interface CardItem {
    name: string
    price: number
    origin: number
    desc: string
}

const current = ref<number>(0)
const tabList = [
    {
        name: 'VIP'
    },
    {
        name: 'SVIP'
    }
]
// 定义tabChange事件回调函数
const tabChange = (index: number) => {
    current.value = index
}

// 当前选中的索引
const curIndex = ref<number>(0)

// VIP卡列表
const cardList = reactive<CardItem[]>([
    {
        name: '周卡',
        price: 29,
        origin: 99,
        desc: '7天畅看'
    },
    {
        name: '月卡',
        price: 29,
        origin: 999,
        desc: '30天畅看'
    },
    {
        name: '年卡',
        price: 29,
        origin: 1999,
        desc: '365天畅看'
    }
])

// 查看详情
const goDetail = () => {
    uni.showToast({
        title: `查看详情`,
        icon: 'none'
    })
    // uni.navigateTo({ url: '/pages/vip-detail/vip-detail' });
}

// 处理支付
const handlePay = () => {
    const item = cardList[curIndex.value];
    uni.showToast({
        title: `您选择了${item.name}`,
        icon: 'none'
    })

    // 这里可以添加实际的支付逻辑
    // 例如调用支付接口
    // payService.createOrder(item)
}

// 页面加载时的逻辑（如果需要）
onLoad((options) => {
    // 可以在这里处理页面参数
    console.log('页面加载参数:', options)
})
</script>

<style lang="scss" scoped>
.page {
    padding: 30rpx;
    background: linear-gradient(to bottom, #fff3e0 10%, #ffffff 30%); //渐变色
    min-height: 100vh;
}

.nav-bar {
    height: 100rpx;
}

.tabCon {
    height: 120rpx;
    // 透明色
    background: rgba(255, 243, 224, 0.5);
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    text-align: center;

    .tab {
        font-size: 32rpx;
        font-weight: 500;
        color: #5e3420;

        // :deep(.u-scroll-box) {
        //     background: #fff5e3;
        // }
    }
}



.header {
    width: 100%;
    height: 120rpx;
    background-image: url('../../static/images/vip/vipGrade.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    text-align: center;
    position: relative;

    .questionIcon {
        position: absolute;
        right: 130rpx;
        top: 46rpx;
    }

    .link {
        display: block;
        font-size: 24rpx;
        color: #5e3420;
        margin-top: 10rpx;
        position: absolute;
        right: 30rpx;
        top: 30rpx
    }

    .title {
        font-size: 30rpx;
        font-weight: 500;
        color: #333;
        position: absolute;
        left: 250rpx;
        top: 35rpx
    }
}

.card {
    width: 100%;
    height: 160rpx;
    /* 按需调整 */
    background: #fbf0e6;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    /* 上下居中 */
    justify-content: flex-start;

    /* 左对齐 */
    .icon {
        width: 128rpx;
        height: 128rpx;
        margin-right: 20rpx;
    }

    .name {
        flex: 1;
        /* 占满中间 */
        font-size: 32rpx;
        font-weight: 500;
        color: #5e3420;
    }
    .price {
        font-size: 32rpx;
        font-weight: 500;
        color: #5e3420;
    }

    .arrow {
        font-size: 28rpx;
        color: #5e3420;
    }
}

.beneTitle {
    font-size: 32rpx;
    font-weight: 500;
    color: #5e3420;
    margin-bottom: 30rpx;
}

.benefit {
    margin-bottom: 30rpx;
    display: flex;
    justify-content: flex-start;


    .benefitItem {
        width: 180rpx;
        height: 180rpx;
        padding-left: 30rpx;
        // background: #fbf0e6;
        border-radius: 16rpx;
        margin-bottom: 30rpx;
        padding: 0 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 上下居中 */
        justify-content: flex-start;

        /* 左对齐 */
        .desc {
            font-size: 28rpx;
            font-weight: 500;
            color: #5e3420;
        }
    }
}

.pay-btn {
    margin-top: 60rpx;
    width: 600rpx;
    height: 80rpx;
    background: radial-gradient(ellipse at center, #fdedd6 30%, #f1c6a2 100%); //径向渐变
    border-radius: 16rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #5e3420;
    display: flex;
    align-items: center;
    /* 上下居中 */
    justify-content: center;
}

// 协议
.protocol {
    font-size: 24rpx;
    font-weight: 400;
    color: #5e3420;
    line-height: 42rpx;
    text-align: center;
}
</style>